<script setup>
import dayjs from 'dayjs'
import ThreeParts from '@/layout/SubLayout/ThreeParts.vue'
import { requestConfig } from '@/config'
import { HomeApi } from '@/api/index'
import {
  defaultDestroyStatsChart,
  defaultMainInfo,
  defaultOrderStats,
  dictJobVolumeType,
  modelInfoCardItems,
} from '@/pages/__view-constant/index'

const data = reactive({
  orderStatsReady: false,
  destroyStatsReady: false,
  destroyDispatchStatsReady: false,
  destroyDispatchQuery: {
    year: `${dayjs().year()}`,
    month: '',
  },
})

// fetch系统基本信息
const { data: resBaseInfo } = useRequest(HomeApi.getBaseInfo, {
  ...requestConfig.pollingNormal,
})

// fetch订单统计
const { data: resOrderStats } = useRequest(HomeApi.getOrderStats, {
  ...requestConfig.pollingNormal,
  onFinally: () => {
    data.orderStatsReady = true
  },
})

// fetch销毁排程
const { data: resDestroyPlan } = useRequest(HomeApi.getDestroyPlan, {
  ...requestConfig.pollingNormal,
})

// fetch销毁量统计
const { data: resDestroyStats } = useRequest(HomeApi.getDestroyStats, {
  ...requestConfig.pollingNormal,
  onFinally: () => {
    data.destroyStatsReady = true
  },
})
const formatedDestroyStats = useFormatResult(resDestroyStats, (res) => {
  const merge = [], paperList = res?.data?.paperDestList || [], mediaList = res?.data?.multiDestList || []
  for (let i = 0; i < 12; i++) {
    const month = i + 1
    const paperItem = paperList.find(item => item.month === `${month}`)
    const mediaItem = mediaList.find(item => item.month === `${month}`)
    merge.push({
      month: `${month}`,
      type: 'paper',
      number: paperItem?.number || 0,
    })
    merge.push({
      month: `${month}`,
      type: 'media',
      number: mediaItem?.number || 0,
    })
  }
  return merge
})

// fetch各单位送销量统计
const { data: resDestroyDispatchStats, run } = useRequest(() => HomeApi.getDestroyDispatchStats(data.destroyDispatchQuery), {
  ...requestConfig.pollingNormal,
  onFinally: () => {
    data.destroyDispatchStatsReady = true
  },
})

// fetch收、检、销、储
const { data: resJobVolumeStats } = useRequest(HomeApi.getJobVolumeStats, {
  ...requestConfig.pollingNormal,
  // onFinally: () => {
  //   data.destroyDispatchStatsReady = true
  // },
})
const formatedJobVolumeStats = useFormatResult(resJobVolumeStats, (res) => {
  const tableData = [], resData = res?.data || {}
  Object.keys(resData).forEach((key) => {
    const item = resData[key]
    let formattedItem = {}
    Object.keys(item).forEach((k) => {
      formattedItem[k] = key === 'storageNum' ? `${item[k]}kg` : `${item[k]}包`
    })
    tableData.push({
      ...formattedItem,
      jobType: dictJobVolumeType[key],
    })
  })
  return tableData
})

const {
  orderStatsReady,
  destroyStatsReady,
  destroyDispatchStatsReady,
  destroyDispatchQuery,
} = toRefs(data)
watch(() => destroyDispatchQuery, (newData) => {
  if(newData) {
    run()
  }
}, { deep: true, immediate: true })
</script>

<template>
  <ThreeParts>
    <template #left>
      <div style="height:30.3965%">
        <UiPanel title="基本信息">
          <BaseInfoCard :data="resBaseInfo?.data || { ...defaultMainInfo }" :items="modelInfoCardItems" />
        </UiPanel>
      </div>
      <div class="mt-26px" style="height:30.0661%">
        <UiPanel title="订单统计" stretch>
          <ChartOrderStats :data="resOrderStats?.data || { ...defaultOrderStats }" :ready="orderStatsReady" />
        </UiPanel>
      </div>
      <div class="mt-26px" style="flex:1;min-height: 0;">
        <UiPanel title="销毁量统计" stretch title-length="5">
          <ChartDestroyStats :chart-data="formatedDestroyStats || [...defaultDestroyStatsChart]" :plan-data="resDestroyPlan?.data || {}" :ready="destroyStatsReady" />
        </UiPanel>
      </div>
    </template>
    <template #center>
      <div style="height: 100%;padding: 0 32px;">
        <UiTabParts>
          <template #left>
            <DispatchStatsMapMode :data="resDestroyDispatchStats?.data || {}" :ready="destroyDispatchStatsReady" />
          </template>
          <template #right>
            <DispatchStatsChartMode :data="resDestroyDispatchStats?.data || {}" :ready="destroyDispatchStatsReady" @query-change="v => destroyDispatchQuery = { ...v }" />
          </template>
        </UiTabParts>
      </div>
    </template>
    <template #right>
      <div style="height:30.3964%">
        <UiPanel title="当前员工" stretch>
          <StaffCard :data="resBaseInfo?.data || {}" />
        </UiPanel>
      </div>
      <div style="flex:1;min-height: 0;" class="mt-26px">
        <UiPanel title="收、检、销、储" stretch title-length="6">
          <TableJobVolumeStats :data="formatedJobVolumeStats" />
        </UiPanel>
      </div>
      <div style="height:27.0925%" class="mt-26px">
        <SysNavCard />
      </div>
    </template>
  </ThreeParts>
</template>

<page-meta lang="yaml">
title: 首页
layout: main
</page-meta>

<style lang='scss' scoped>
</style>
